import React, { useState } from 'react';
import './index.scss'
import DoingItems from '../../Components/DoingItems'
import DoneItems from '../../Components/DoneItems'
import TodoItems from '../../Components/TodoItems'
import { DragDropContext } from "react-beautiful-dnd"


function App() {
  const [allData, setAllData] = useState([])
  const [todoData, setTodoData] = useState([])
  const [doingData, setDoingData] = useState([])
  const [doneData, setDoneData] = useState([])

  // ----allData重新初始化---------------
  React.useEffect(() => {
    initData()
  }, [allData])

  // --------初始化三项列表数据--------------
  function initData() {
    const newTodoData = allData.filter((item) => {
      return item.status == 'todo'
    })
    const newDoingData = allData.filter((item) => {
      return item.status == 'doing'
    })
    const newDoneData = allData.filter((item) => {
      return item.status == 'done'
    })
    setTodoData(newTodoData)
    setDoingData(newDoingData)
    setDoneData(newDoneData)
  }

  // --------------添加todo
  function addTodo() {
    const id = Math.floor(Math.random() * 100000000),
      newTodo = { id: id, content: '', status: 'todo' }
    setAllData([...allData, newTodo])
  }

  // -----------根据id修改todo
  function editTodo(id, newVal) {
    // 修改队列并返回新队列
    const newData = todoData.map((item) => {
      if (item.id == id) { item.content = newVal }
      return item
    })
    setTodoData(newData)
  }

  // ------------删除数据项
  function deleteItemById(id) {
    const newAllData = allData.filter((item) => {
      return item.id != id
    })
    setAllData(newAllData)
  }

  // 将对应id的项推送到某列表
  function pushItemTo(id, filed) {
    const newAllData = allData.map((item) => {
      if (item.id == id) { //匹配对应项
        switch (filed) {
          case 'todo': item.status = 'todo';
            break;
          case 'doing': item.status = 'doing';
            break;
          case 'done': item.status = 'done';
            break;
          default:
            break;
        }
      }
      return item
    })
    setAllData(newAllData)
  }


  // ------------拖拽完成修改顺序-----------------------------
  function onDragEnd(result) {
    // 获取拖拽目标和拖拽物id
    const from = result.source.droppableId,
      target = result.destination.droppableId,
      id = result.draggableId
    // 从todo拖拽到DoingList
    if (from == "myTodoList" && target == "myDoingList") {
      pushItemTo(id, 'doing')
      // 拖拽到DoneList
    } else if (from == "myDoingList" && target == "myDoneList") {
      pushItemTo(id, 'done')
    } else if (from == target) {

    } else {
      alert('做事要按顺序来!')
    }
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className='todoPage'>
        <TodoItems todoData={todoData} editTodo={editTodo} addTodo={addTodo}></TodoItems>
        <DoingItems doingData={doingData} deleteItemById={deleteItemById}></DoingItems>
        <DoneItems doneData={doneData} deleteItemById={deleteItemById}></DoneItems>
      </div>
    </DragDropContext>
  );
}

export default App;